﻿@model _17bangMVC.Models.Article.ArticleModel
@{
    ViewBag.Title = "精品文章.一起帮";
}


<div class="container" style="padding-top:100px">
    <div class="row">
        <div class="col-8">
            @foreach (var item in Model.ArticleLists)
            {
                <div style="padding:20px;border-bottom:30px">
                    <span class="fa fa-calendar">@item.PublishTime.ToString("yyyy年MM月dd日 hh点mm分")</span>
                    <span style="float:right">作者<a href="/Article?@item.User.Id" target="_blank">@item.User.Name</a></span>
                    <h5><a href="/Article/Single?@item.Id">@item.Title</a></h5>
                    <p>@item.Body</p>
                    <div style="display:block;width:100%">
                        <span><label><b>关键字：</b></label></span>
                        @for (int i = 0; i < item.KeyWords.Count; i++)
                        {
                            <span class="badge badge-secondary">@item.KeyWords[i].Name</span>
                        }
                    </div>
                    <div style="float:right;border-bottom:10px">
                        <span><a href="/Article/Single?@item.Comments.Id" class="fa fa-comments-o">@item.Comments.CommentCount</a></span>
                        <span class="fa fa-thumbs-o-up">
                            赞：@item.Appraise.AgreeAmount
                        </span>
                        <span class="fa fa-thumbs-o-down">
                            踩：@item.Appraise.DisagreeAmount
                        </span>
                    </div>
                </div>
            }
        </div>
        <div class="col-4" style="float:right">
            <div class="container" style="border:0.1px dashed darkgray;padding:20px">
                <div style="font-size:24px">
                    <span class="fa fa-tags">关键字</span>
                </div>
                <hr />
                <div>
                    @Html.Action("_KeyWord", "Shard")
                </div>
                <hr />
                <div class="row">
                    <div class="col-sm-7">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="直接输入关键字查找">
                            <span class="input-group-text"><span class="fa fa-search"></span></span>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <a href="" class="btn btn-secondary">
                            <span class="fa fa-random"></span>
                            <span style="margin-left:0px;">换一批</span>
                        </a>
                    </div>
                </div>
                <div class="container" style="border: 0.1px solid darkgray; padding: 20px">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <span class="fa fa-eye">
                                    每日督促
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span class="fa fa-heart">
                                    排行榜
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span class="fa fa-user-circle-o">
                                    新注册
                                </span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <table>
                            <tbody>
                                <tr>
                                    <td colspan="3" style="font-size:18px">
                                        <span class="fa fa-calendar-check-o">
                                            2022年03月13日
                                        </span>
                                    </td>
                                </tr>
                                @Html.Action("_Tabs", "Shard")
                                <vc:_tabs></vc:_tabs>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>